<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="__UI__/css/bs3/dpl.css" rel="stylesheet" type="text/css" />
<link href="__UI__/css/bs3/bui.css" rel="stylesheet" type="text/css" />
<link href="__UI__/css/style.css" rel="stylesheet" type="text/css" />
<link href="__UI__/uploadify/uploadify.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="__UI__/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="__UI__/uploadify/jquery.uploadify.min.js"></script>
<style type="text/css">

button {
	margin-right:20px;
}

.imageViewTheme .bui-uploader-button-wrap {
	margin-bottom:10px;;
	margin-left:10px;
}

.image{
	float:left;
	width:300px;
	padding:10px auto;
	display:block;
}

.image .photo{
	width:300px;
	height:auto;
	overflow:hidden;
	float:left;
}

.image img{
	display:inline-block;
	width:200px;
	height:auto;
	overflow:hidden;
	float:left;
}

.image .del{
	display:inline-block;
	float:right;
	width:100px;
}

.buttons {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: 20px;
    padding: 4px 12px;
    font-size: 14px;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #ffffff;
    background-color: #000000;
    border-color: #cccccc;
}

.btns span{
	display:block;
	margin:5px auto;
}

.selects{
	float:left;
	min-height:100px;
	height:auto;
	overflow:hidden;
}

.selects .lists{
	float:left;
	width:220px;
	height:200px;
}

.selects .direction{
	float:left;
	width:80px;
	height:200px;
}

.selects option {
	height:20px;
	line-height:20px;
	padding:2px;
}

.selectes {
	width:200px;
	height:200px;
	word-wrap:break-word;
	word-break:break-all;
	margin-right:50px;
}

.selectes>option {
	margin:5px auto;
}

.title {
	text-align:center;
	margin-bottom:20px;
}

</style>
</head>
<body>
<div class="demo-content" style="margin-top:1%;">
    <div class="row" style="margin-left:10px;">
        <form id="J_Form" action="{:U('Home/Scene/edit')}" class="form-horizontal registerform" method="post" enctype="multipart/form-data">
        	<h2 class="title">{$scripts.scriptsname} —— 场景</h2>
            <div id="panel" class="" style="padding:10px;">
                <input name="id" type="hidden" value="{$info.id}">
                <div class="control-group">
					<label class="control-label"><s>*</s>场景名称</label>
					<div class="controls">
						<input type="text" name="scenename" id="scenename" datatype="*" nullmsg="请输入场景名称！" data-tip="{text:'请输入场景名称'}" style="width:600px;" value="{$info.scenename}" />
					</div>
				</div>
                <div class="control-group">
					<label class="control-label"><s>*</s>场景说明</label>
					<div class="controls" style="margin-bottom:80px;">
						<textarea name="brief" id="brief" datatype="*" nullmsg="请输入场景说明！" data-tip="{text:'请输入场景说明'}" style="width:600px; height:100px;">{$info.brief}</textarea>
					</div>
				</div>
<script type="text/javascript">
	var img_id_upload=new Array();//初始化数组，存储已经上传的图片名
	var i=0;//初始化数组下标
	$(function() {
		$('#file_upload').uploadify({
			'formData':{
				'timestamp':'{$Think.const.NOW_TIME}',
				'token':'{$Think.const.NOW_TIME | md5}',
				'uid':"{:session(C('AUTH_KEYS'))}",
				'url':'{:U("Home/Scripts/uploadify/")}',
			},
			'auto' : true,//关闭自动上传
			'removeTimeout' : 5,//文件队列上传完成1秒后删除
			'swf' : '__UI__/uploadify/uploadify.swf',
			'uploader' : '{:U("Home/Scripts/uploadify/")}',
			'method' : 'post',  //方法，服务端可以用$_POST数组获取数据
			'buttonText' : '上传文件',//设置按钮文本
			'multi' : true,//允许同时上传多张图片
			'uploadLimit' : 10,//一次最多只允许上传10张图片
			'fileTypeDesc' : 'Image Files',//只允许上传图像
			'fileTypeExts' : '*.gif; *.jpg; *.png; *.mp4',//限制允许上传的图片后缀
			'fileSizeLimit' : '260MB',//限制上传的图片大小
			'onUploadSuccess' : function(file, data, response) { //每次成功上传后执行的回调函数，从服务端返回数据到前端
				var n = parseInt(Math.random()*100);
				var obj = jQuery.parseJSON(data);
				var imgstr = '<li id="'+n+'" style="color:#fff">'+obj.url+'<a onclick=del("'+n+'","'+obj.url+'") style="margin-left:10px;cursor:pointer;color:#fff">删除</a></li><input name="pic[]" type="hidden" value="'+obj.url+'">';
				$("#previewImgs").append(imgstr);
				$("#saveurl").append(obj.url+'|');
			}
		});
	});
	
	function del(delName,delId){
		var d='#'+delName;
		var url = '{:U("Home/Scripts/dels/")}';
		$.post(url,{'name':delId},function(data){
			$(d).attr("value","");
			$(d).html(data.info);
			$(d).hide(3000);
		},'json');
	}
</script>                
                <div class="control-group" style="margin-bottom:20px;">
					<label class="control-label" style="margin-right:10px;"><s></s>多媒体文件</label>
                    <div class="controls" style="height:auto;">
                    	<input id="file_upload" name="file_upload" type="file" multiple>
                        <ul id="previewImgs">
                        <volist name="pic" id="v" key="k">
                        	<if condition="$v.ext eq 'jpg' or $v.ext eq 'png' or $v.ext eq 'gif'">
                        	<li id="{$k}">
                            <img src="__R__/{$v.pic}" style="widht:300px; margin-top:15px;"/>
                            <input name="pic[]" type="hidden" value="{$v.pic}" id="{$k}">
                            <a onclick="del('{$k}','./{$v.pic}')" style="margin-left:10px;cursor:pointer;color:#fff">删除</a>
                            </li>
                            </if>
                            <if condition="$v.ext eq 'mp4'">
                            <li id="{$k}">
                            <video id="video1" controls width="420" style="margin-top:15px;">
								<source src="__R__/{$v.pic}" type="video/mp4" />
							</video>
                            <input name="pic[]" type="hidden" value="{$v.pic}" id="{$k}">
                            <a onclick="del('{$k}','./{$v.pic}')" style="margin-left:10px;cursor:pointer;color:#fff">删除</a>
                            </li>
                            </if>
                        </volist>
                        </ul>
					</div>
                    <div class="controls" style="height:auto;">
                    	<textarea name="uploadfileurl" style="display:none;" id="saveurl"></textarea>
					</div>
				</div>
                
                <div class="control-group" style="margin-bottom:20px;">
					<label class="control-label">响应部门</label>
                    <div class="selects">
                        <div class="lists" style="margin-left:10px;">
                            <select name="left" id="left" multiple="multiple" onchange="selected(this)" class="selectes">
                                <volist name="departments" id="vo">
                                	<option value="{$vo}">{$vo}</option>
                                </volist>
                            </select>
                        </div>
						<div class="direction">
                        	<div style="margin-top:20px;"><input type="button" value="全部向右" onclick="ShiftAll('left')"/></div>
							<div style="margin-top:20px;"><input type="button" value="向右移动" onclick="Shift('right')"/></div>
                            <div style="margin-top:20px;"><input type="button" value="全部向左" onclick="ShiftAll('right')"/></div>
							<div style="margin-top:20px;"><input type="button" value="向左移动" onclick="Shift('left')"/></div>
                    	</div>
                        <div class="lists">
                            <select name="department[]" id="right" multiple="multiple" onchange="selected(this)" class="selectes" datatype="*" nullmsg="请选择参与部门！">
                            	<volist name="department" id="vo">  
                                	<option value="{$vo}" selected>{$vo}</option>
                            	</volist>
                            </select>
						</div>
                        <div class="direction">
                        	<div style="margin-top:20px;"><input type="button" value="置顶" onclick="moveTop('right');"/></div>
							<div style="margin-top:20px;"><input type="button" value="向上" onclick="moveUp('right')"/></div>
							<div style="margin-top:20px;"><input type="button" value="向下" onclick="moveDown('right')"/></div>
                            <div style="margin-top:20px;"><input type="button" value="置底" onclick="moveBottom('right')"/></div>
                    	</div>
                    </div>
				</div>
                <div class="control-group">
					<label class="control-label">响应提示</label>
                    <div class="controls" style="height:auto; overflow:hidden">
                       <div id="InputsWrapper">  
                            <volist name="hint" id="v">
							<div style="margin:5px auto">
                                <input type="text" name="hint[]" id="field_{$k}" value="{$v}" style="width:510px;"/>
                                &nbsp;&nbsp;&nbsp;<span class="buttons button-inverse removeclass">删除提示</span>
                            </div>
							</volist>
                        </div>
					</div>
				</div>
                <div class="control-group">
                	<label class="control-label">&nbsp;</label>
					<div class="controls">
						<span id="AddMoreFileBox" class="buttons button-inverse">新增提示</span>
					</div>
				</div>
                <div class="row actions-bar">
                	<span id="msgdemo2"></span>
                    <div class="form-actions span13 offset3">
                        <button type="submit" class="button button-primary">保存</button>
                        <button type="reset" class="button">重置</button>
                        <button type="button" class="button button-info" name="backid" id="backid">取消</button>
                    </div>
            	</div>           
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="__UI__/js/config.js"></script>
<script type="text/javascript" src="__UI__/js/bui.js"></script>
<script type="text/javascript" src="__UI__/js/Validform_v5.3.2_min.js"></script>
<script type="text/javascript">
	$('#left').bind('dblclick', function() {
		$("option:selected", this).appendTo('#right');
	});

	function ShiftAll(thiz){
		if(thiz == 'left'){
		$('#left option').appendTo('#right');
		r_optionsOverAll=$("#right").children().attr("selected",true);
		}
		if(thiz == 'right'){
			$('#right option').appendTo('#left');
		optionsOverAll=$("#left").children().attr("selected",true); 
		}
	}
    
	function selected(thiz){
		var name = thiz.name;
		if(name=="department[]"){
			$("select[name='left']").val("");
		}else{
			$("select[name='department[]']").val("");
		}
	}
	function Shift(thiz){
		var right = $("select[name='department[]']");
		var left = $("select[name='left']");
		if(thiz=="left" && right.val() != ""){
			lrShift(right,left);
		}else if(thiz=="right" && left.val() != ""){
			lrShift(left,right);
		}
	}

	function lrShift(dest,target){
		var childrens = dest.children();
		var args = "";
		var dests = dest.val()
		for(var x = 0; x < dests.length; x++){
			var vaTemp = dests[x];
			target.append("<option value='"+vaTemp+"'>"+vaTemp+"</option>");
			target.find("option[value='"+vaTemp+"']").attr("selected",true);
			for(var y = 0; y <childrens.length;y++ ){
				if(childrens.get(y).value==vaTemp)
					$(childrens.get(y)).remove();
			}
		}
		dest.val("");
	}
	
	function ShiftValue(address){
		var right = $("select[name='department[]']");
		var left = $("select[name='left']");
		if(right.val()!=null){
			shift(right,address);
		}else if(left.val()!=null){
			shift(left,address);
		}
	}
	
	function shift(obj,address){
		var objData = obj.val();
		var childrens = obj.children();
		var strs = "";
		for(var x = 0; x < objData.length; x++){
			strs+="@"+objData[x];
		}
		var temp = null;
		if(address=="top"){
			var number = findSelect(childrens,objData[0]);
			if((--number) < 0)
				return;
			temp = childrens.get(number);
		}else{
			var number = findSelect(childrens,objData[objData.length-1]);
			if((++number) > childrens.length-1)
				return;
			temp = childrens.get(number);
		}

		var n = 0;
		var buffer = new Array(childrens.length-objData.length);
		for(var x = 0; x < childrens.length;x++){
			var value = childrens.get(x).value;
			if(strs.indexOf(value)==-1)
				buffer[n++] = value;
		}

		obj.empty();
		if(address=="top"){
			for(var y = 0; y < buffer.length;y++){
				if(buffer[y]==temp.value){
					for(var x = 0; x < objData.length ; x++){
						obj.append("<option>"+objData[x]+"</option>");
					}
				}
				obj.append("<option>"+buffer[y]+"</option>");
			}
		}else{
			for(var y = 0; y < buffer.length;y++){
				obj.append("<option>"+buffer[y]+"</option>");
				if(buffer[y]==temp.value){
					for(var x = 0; x < objData.length; x++){
						obj.append("<option>"+objData[x]+"</option>");
					}
				}
			}
		}
		obj.val(objData);
	}
	
	function findSelect(selects,objValue){
		var number = -1;
		for(var x = 0; x < selects.length; x++){
			if(objValue==selects.get(x).value)
				number = x;
		}
		return number;
	}
	
	function  moveTop(obj){
		var obj = document.getElementById(obj);
		var  opts = []; 
		for(var i =obj.options.length -1 ; i >= 0; i--){
			if(obj.options[i].selected){
				opts.push(obj.options[i]);
				obj.remove(i);
			}
		}
		var index = 0 ;
		for(var t = opts.length-1 ; t>=0 ; t--){
			var opt = new Option(opts[t].text,opts[t].value);
			opt.selected = true;
			obj.options.add(opt, index++);
		}
	} 

	function  moveBottom(obj){
		var obj = document.getElementById(obj); 
		var  opts = []; 
		for(var i =obj.options.length -1 ; i >= 0; i--){
			if(obj.options[i].selected){
				opts.push(obj.options[i]);
				obj.remove(i);
			}
		}
		for(var t = opts.length-1 ; t>=0 ; t--){
			var opt = new Option(opts[t].text,opts[t].value);
			opt.selected = true;
			obj.options.add(opt);
		}
	}
	
	function moveUp(obj){
		var obj = document.getElementById(obj);
		for(var i=1; i < obj.length; i++){
			if(obj.options[i].selected){
				if(!obj.options.item(i-1).selected){
					var selText = obj.options[i].text;
					var selValue = obj.options[i].value;
					obj.options[i].text = obj.options[i-1].text;
					obj.options[i].value = obj.options[i-1].value;
					obj.options[i].selected = false;
					obj.options[i-1].text = selText;
					obj.options[i-1].value = selValue;
					obj.options[i-1].selected=true;
　　　　　　　　　　}
			}
		}
	}

	function moveDown(obj){
		var obj = document.getElementById(obj);
		for(var i = obj.length -2 ; i >= 0; i--){
			if(obj.options[i].selected){
				if(!obj.options[i+1].selected){
					var selText = obj.options[i].text;
					var selValue = obj.options[i].value;
					obj.options[i].text = obj.options[i+1].text;
					obj.options[i].value = obj.options[i+1].value;
					obj.options[i].selected = false;
					obj.options[i+1].text = selText;
					obj.options[i+1].value = selValue;
					obj.options[i+1].selected=true;
				}
			}
		}
	}
	
	$(function () {
		$('#section').click(function(){
			var d = $('#titles').val();
			if(d == ''){
				BUI.Message.Alert('请输入部门名称！');
			}else{
				$.ajax({
					type:'post',
					url:'{:U("Home/Department/add")}',
					dataType:'json',
					data:{title:d},
					success:function(data){
						if(data.status == 'y'){
							$("#titles").attr("value",'');
							$("#title").append( "<option value=" + d +">"+d+"</option>" );
							BUI.Message.Alert('增加成功！');
						}else{
							BUI.Message.Alert('删除失败！');
						}
					}
				});
			}
		});
    });
	$(document).ready(function() {  
		var MaxInputs       = 100000; //maximum input boxes allowed  
		var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID  
		var AddButton       = $("#AddMoreFileBox"); //Add button ID  
		var x = InputsWrapper.length; //initlal text box count  
		<if condition="$count neq ''">
		var FieldCount = Number({$count});
		<else />
		var FieldCount = 1;
		</if>
  		$(AddButton).click(function (e)  //on add input button click  
		{  
        	if(x <= MaxInputs) //max input box allowed  
        	{  
            	FieldCount++; //text box added increment  
            //add input box  
            	$(InputsWrapper).append('<div style="margin:5px auto"><input type="text" name="hint[]" id="field_'+ FieldCount +'" style="width:510px;"/>&nbsp;&nbsp;&nbsp;<span class="buttons button-inverse removeclass">删除提示</span>');  
            	x++; //text box increment  
        	}  
			return false;  
		});  
		$("body").on("click",".removeclass", function(e){ //user click on remove text  
        	if( x > 1 ) {  
				$(this).parent('div').remove(); //remove text box  
				x--; //decrement textbox  
        	}  
			return false;  
		})   
	});
	$(function () {
		$('#dels').click(function(){			
			$('#dels').attr("value",'');
		});
	});
	$(function () {       
		$('#backid').click(function(){
			top.topManager.openPage({
				id:'scene',
				title:'场景管理',
				href:'{:U("Scene/index",array("sid"=>$scripts["id"]))}',
				isClose:true,
				reload:true,
			});
		});
    });
	top.topManager.closePage('scene');
	top.topManager.closePage('scene_add');
    BUI.use(['bui/tab','bui/mask'],function(Tab){
        var tab = new Tab.TabPanel({
            render:'#tab',
            elCls:'nav-tabs',
            panelContainer:'#panel',
            autoRender:true,
            children:[
                {title:'基本信息',value:'1',selected:true},
            ]
        });
    });
    BUI.use('bui/form', function (Form) {
        new Form.Form({
            srcNode:'#J_Form'
        }).render();
    });
	$(function(){
		$(".registerform").Validform({
			tiptype:function(msg,o,cssctl){
				var objtip=$("#msgdemo2");
				cssctl(objtip,o.type);
				objtip.text(msg);
			},
			ajaxPost:true,
			callback:function(data){
				if(data.status == 'y'){
					top.topManager.openPage({
						id:'scene',
						title:'场景管理',
						href:'{:U("Scene/index",array("sid"=>$scripts["id"]))}',
						isClose:true,
						reload:true,
					});
				}
			},
		});
	})
</script>
</body>
</html>